<template>
  <div class="footer">
    <div class="foo1">
      <div>
        <ul>
          <li>马蜂窝旅游网</li>
          <li>中国年轻一代用得更多的旅游网站</li>
          <li>上亿旅行者共同打造的<span>"旅行神器"</span></li>
          <li><span>60,000</span> 多个全球旅游目的地</li>
          <li><span>600,000</span> 个细分目的地新玩法</li>
          <li><span>760,000,000</span> 次攻略下载</li>
          <li><span>38,000</span> 家旅游产品供应商</li>
        </ul>
        <ul>
          <li>关于我们</li>
          <li><a href="#">关于马蜂窝 联系我们</a></li>
          <li><a href="#">隐私政策商标声明</a></li>
          <li><a href="#">服务协议</a></li>
          <li><a href="#">商城平台服务协议</a></li>
          <li><a href="#">网络信息侵权通知指引</a></li>
          <li><a href="#">马蜂窝旅游网服务监督员</a></li>
          <li><a href="#">网站地图 <span>加入马蜂窝</span></a></li>
        </ul>
        <ul>
          <li>旅行服务</li>
          <li><a href="#">旅游攻略</a><a href="#">酒店预订</a></li>
          <li><a href="#">旅游特价</a><a href="#">国际租车</a></li>
          <li><a href="#">旅游问答</a><a href="#">旅游保险</a></li>
          <li><a href="#">旅游指南</a><a href="#">订火车票</a></li>
          <li><a href="#">旅游资讯</a><a href="#">App下载</a></li>
          <li><a href="#"><span>旅行商城全球商家入驻</span></a></li>
        </ul>
      </div>
      <div>
        <ul>
          <li>
            <img :src="URL1" alt="" /><br />
            <p>马蜂窝APP</p>
            <p>扫描立即下载</p>
          </li>
          <li>
            <img :src="URL2" alt=""/><br />
              <p>马蜂窝旅游</p>
              <p>订阅号</p>
          </li>
          <li>
            <img :src="URL3" alt=""/><br />
            <p>马蜂窝良品</p>
            <p>官方服务号</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="sbljd">
      <p>旅游之前，先上马蜂窝！</p>
      <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
      </ul>
    </div>
    <footer-bar-end-vue />
  </div>
</template>
<script>
import footerBarEndVue from './footerBarEnd.vue';

export default {
  data() {
    return {
      URL1: "https://p3-q.mafengwo.net/s10/M00/48/A9/wKgBZ1t_4sSAVJ6uAAAlzJ0PZgU881.png?imageMogr2%2Fthumbnail%2F%2194x90r%2Fgravity%2FCenter%2Fcrop%2F%2194x90%2Fquality%2F90",
      URL2: "http://css.mafengwo.net/images/footer/qr_mfw4.gif",
      URL3: "http://css.mafengwo.net/images/footer/qr_tejia4.png"
    };
  },
  components: {
      footerBarEndVue
  }
};
</script>
<style lang="scss" scoped>
.footer {
  height: 700px;
  background-color: #3c3c3c;
  padding: 0 10%;
  padding-top: 30px;
  font-size: 12px;
  color: #c2c2c2;
  span {
    color: #ff9d00;
  }
  a {
    color: #c2c2c2;
  }
  a:hover{color: #fff;}
  .foo1 {
    display: flex;
    justify-content: space-between;
    div:nth-child(1) {
      position: relative;
      width: 55%;
      height: 200px;
      display: flex;
      justify-content: space-between;
      ul {
        li {
          line-height: 200%;
        }
        li:nth-child(1) {
          padding: 10px 0;
        }
      }
      ul:nth-child(3) {
        li {
          width: 130px;
          display: flex;
          justify-content: space-between;
        }
        li:nth-child(1) {
          display: block;
          text-align: center;
        }
      }
    }
    div:nth-child(2) {
      width: 40%;
      height: 120px;
      margin-top: 55px;
      ul {
        display: flex;
        justify-content: space-around;
        li {
          width: 25%;
          height: 120px;
          display: flex;
          flex-direction: column;
          text-align: center;
          justify-content: center;
          align-items: center;
          img {
            width: 80%;
          }
          p {
            padding: 0;
            text-align: center;
          }
        }
      }
    }
  }
  .sbljd {
    height: 150px;
    height: 70px;
    font-size: 17px;
    margin-top: 40px;
    
    p {
      text-align: center;
    }
    ul {
      display: flex;
      width: 140px;
      justify-content: space-between;
      margin: 0 auto;
      margin-top: 20px;
      li {
          width: 39px;
    height: 38px;
    background-image: url("~@/assets/images/mfw_logo4.png");
    background-size: 475%;
      }
      li:nth-child(1) {
            background-position-x: 2px;
      }
      li:nth-child(2) {
            background-position-x: -35px;
      }
      li:nth-child(3) {
            background-position-x: -72px;
      }
    }
  }
}
</style>